<!--
模态框组件(上传文件框)
参数
- iFiles (ArrayList<IFile>)
- maxCount (int:1)
- id (String)
- modalId (String)
- var 变量名 <input name>
-->
<div class="modal-header"
     xmlns:th="http://www.thymeleaf.org">
    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
        <span aria-hidden="true">×</span></button>
    <h4 class="modal-title">文件上传框</h4>
    <small></small>
</div>
<div class="modal-body"
     xmlns:th="http://www.thymeleaf.org">
    <!--/*@thymesVar id="id" type="java.lang.String"*/-->
    <div th:id="${id}" class="container-fluid upload-wrapper">
        <div class="center-block">
            <div class="row">
                <div class="col-md-12">
                    <!--/*@thymesVar id="height" type="java.lang.Integer"*/-->
                    <div class="upload-area"><!--/*@thymesVar id="iFiles" type="java.util.ArrayList<in.hocg.web.modules.system.domain.IFile"*/-->
                        <p class="text-sub text-center"
                           th:styleappend="${iFiles.isEmpty()}?'':'display:none'">请选择需要上传的文件</p>
                        <div class="upload-progress"
                             th:unless="${iFiles.isEmpty()}"
                             th:classappend="${iFile.id}"
                             th:each="iFile,i : ${iFiles}"
                             th:attr="data-fid=${iFile.id}">
                            <div class="progress-info">
                                <!--<span class="operating success-upload">-->
                                <!--<i class="glyphicon glyphicon-ok"></i>-->
                                <!--</span>-->
                                <a href="javascript:;;" class="operating remove-upload"
                                   th:attr="data-id=${iFile.id}">
                                    <i class="glyphicon glyphicon-trash"></i>
                                </a>
                                <span class="file-info">
                                    <span class="file-name"
                                          th:title="${iFile.id}"
                                          th:text="${iFile.uploadName}">file.name</span>
                                    <span class="file-size"
                                          th:text="${@iText.formatBytes(iFile.size)}">file.size</span>
                                </span>
                                <span class="upload-status">100%</span>
                            </div>
                            <div class="progress-bg success" style="width: 100%;"></div>
                        </div>
                    </div>
                    <div>
                        <ul class="upload-tip">
                            <li>不能上传超过 500M 的文件</li>
                        </ul>
                        <div class="upload-btn">
                            选择文件
                        </div>
                    </div>
                </div>
                <!--<div class="col-md-4">-->
                <!--参数设置-->
                <!--</div>-->
            </div>
        </div>
    </div>
</div>
<div class="modal-footer"
     xmlns:th="http://www.thymeleaf.org">
    <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
    <!--/*@thymesVar id="id" type="java.lang.String"*/-->
    <!--<button class="btn btn-primary" data-dismiss="modal" type="button">关闭</button>-->
</div>
<script xmlns:th="http://www.thymeleaf.org"
        th:inline="javascript">
    $(function () {
        var Uploader = new UploadBox({
            id: '#' + [[${id}]],
            maxCount: [[${maxCount?:1}]],
            server: '/admin/system/file/upload',
            token: $('meta[name="_csrf"]').attr('content'),
            header: $('meta[name="_csrf_header"]').attr('content'),
            count: [[${iFiles.size()}]],
            input: 'input[name="' + [[${var}]] + '"'
        });

        $('#' + [[${modalId}]]).on('shown.bs.modal', function () {
            Uploader.uploader.refresh();
        });
    });
</script>